@import '~@/theme.less';
@import '~@/assets/oaicons/iconfont.css';

// 这个是 TreeSelectGroup 依赖的样式.
// 因为这个组件需要一个tagRender参数做扩展, 然而3.x的antd不支持. 因此引入antd 4.x版本的组件,
// 然而4.x的组件解构与样式和3.x的不兼容, 因此要导入相关样式
// 因为项目只有在 global.less 才支持非 css modules 的样式引入, 所以在这里引入组件样式.
@import '~@/components/TreeSelectGroup/style/tree-select-group-dependence.less';

@marginWrap: 16px;

html,
body,
#root {
    height: 100%;
    width: 100%;
    overflow: hidden;
}

// 解决chrome默认用户代理
h1 {
    font-size: 2em;
}

.colorWeak {
    filter: invert(80%);
}

.ant-layout {
    min-height: 100vh;
}

canvas {
    display: block;
}

body {
    //text-rendering         : optimizeLegibility;
    //-webkit-font-smoothing : antialiased;
    //-moz-osx-font-smoothing: grayscale;
}

.globalSpin {
    width: 100%;
    margin: 40px 0 !important;
}

ul,
ol {
    list-style: none;
}

// body .ant-layout-header {
//     height     : 70px;
//     line-height: 70px;
// }

// body {
.ant-menu-vertical .ant-menu-item::after,
.ant-menu-vertical-left .ant-menu-item::after,
.ant-menu-vertical-right .ant-menu-item::after,
.ant-menu-inline .ant-menu-item::after {
    left: 0;
    right: auto;
}

.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
    border-right: none;
}

.ant-card-body {
    padding: 24px;
}

.ant-tabs-tab {
    padding-left: 4px !important;
    padding-right: 4px !important;
}

.ant-layout.ant-layout-has-sider > .ant-layout,
.ant-layout.ant-layout-has-sider > .ant-layout-content {
    //overflow-x: auto;
    overflow-y: auto;
}

.ant-message {
    top: 82px;
    z-index: 1032 !important;
}

// }

.ant-menu-dark .ant-menu-item-selected > a,
.ant-menu-dark .ant-menu-item-selected > a:hover {
    // color: #FF9E00!important;
}

.ant-menu.ant-menu-dark .ant-menu-item-selected,
.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected {
    background-color: inherit !important;
}

/* 文字颜色 */
.text-success {
    color: #4ecb74;
}

.text-primary {
    color: #07a;
}

.text-danger {
    color: #a5380a;
}

.text-warning {
    color: #ffa22d;
}

.btns {
    button {
        margin-left: 10px;

        &:first-child {
            margin-left: 0;
        }
    }
}

.queryPageSearch {
    .form-box {
        padding: 16px !important;

        h3 {
            line-height: 40px;
            color: #000;
            font-weight: bold;
            margin: 0;
        }
    }

    .searchTitle {
        justify-content: space-between;
    }
}

.pieCenter {
    position: absolute;
    background: transparent;
    text-align: center;

    div {
        font-size: 14px;
        font-weight: 400;
        color: rgba(0, 0, 0, 0.45);
    }

    em {
        font-style: normal;
        font-size: 30px;
        color: rgba(51, 51, 51, 1);
    }
}

.oa-number {
    padding-left: 0.5em;
    padding-right: 0.5em;
}

.descriptionText {
    padding: 10px 30px;

    span {
        display: inline-block;
        margin-left: 30px;

        &:first-child {
            margin-left: 0;
        }

        em {
            font-style: normal;
            font-size: 30px;
            color: #333;
            margin: 0 5px;
        }
    }
}

// 滚动条
::-webkit-scrollbar {
    width: 6px;
}

::-webkit-scrollbar:horizontal {
    height: 6px;
}

::-webkit-scrollbar-thumb {
    background: #aaa;
    border-radius: 20px;
}

::-webkit-scrollbar-thumb:vertical,
::-webkit-scrollbar-thumb:horizontal {
    background: #ddd;
    border-radius: 20px;
}

.ant-menu::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.05);
}

::-webkit-scrollbar-track {
    background: #f8f8f8;
    border-radius: 20px;
}

.ant-breadcrumb-link {
    a {
        color: #ffa22d !important;
    }
}

.ant-card {
    .ant-card-head {
        padding: 0 @marginWrap;
    }

    .ant-card-head-title {
        font-weight: 500;
    }

    .ant-card-extra {
        font-weight: bold;
    }
}

// 为了解决左侧菜单收起来时文字未隐藏的bug
.ant-menu-inline-collapsed > .ant-menu-item .iconfont + span,
.ant-menu-inline-collapsed > .ant-menu-item-group > .ant-menu-item-group-list > .ant-menu-item .iconfont + span,
.ant-menu-inline-collapsed
    > .ant-menu-item-group
    > .ant-menu-item-group-list
    > .ant-menu-submenu
    > .ant-menu-submenu-title
    .iconfont
    + span,
.ant-menu-inline-collapsed > .ant-menu-submenu > .ant-menu-submenu-title .iconfont + span {
    display: inline-block;
    max-width: 0;
    opacity: 0;
}

.ant-layout-sider-collapsed {
    .iconfont {
        font-size: 18px;
    }
}

// 顶部菜单标题默认 白色
.ant-menu-dark .ant-menu-item > a {
    color: rgba(255, 255, 255) !important;
}

// 头部菜单开发状态
//#root {
//    .disabled-menu > a {
//        color  : rgba(255, 255, 255, 0.85) !important;
//        opacity: 1 !important;
//    }
//}

#sidebar-collapse {
    position: fixed;
    left: 0;
    bottom: 0;
    background: #fff;
    z-index: 1;
}

.vv-from-title {
    font-size: 16px;
    font-weight: bold;
    color: #000;
    margin-bottom: 30px;
    margin-top: 10px;
}

// 上传控件disabled
.ant-upload.ant-upload-disabled {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: gray;
}

//页面最下方 微微科技研发中心出品 文字位置调节
.antd-pro-global-footer-globalFooter {
    margin: 20px 0 !important;
}

// 表单统一宽度处理
.form-Wrap {
    width: 900px;
}

//处理a标签置灰UI修改
.ant-table a[disabled] {
    opacity: 0.45;
    color: @primary-color;
}

pre {
    font-family: system-ui !important;
}

@media screen and (min-width: 1600px) {
    .form-Wrap {
        width: 1100px;
    }
}

@media screen and (max-width: 1200px) {
    .form-Wrap {
        width: 100%;
    }
}

#left-side {
    .ant-menu-inline .ant-menu-item {
        width: initial;
    }
}

.bf-container {
    border: 1px solid #d9d9d9;
    border-radius: 4px;
}

.has-error {
    .bf-container {
        border: 1px solid #f5222d;
    }
}

.menu-tabs {
    > .ant-tabs-bar {
        .ant-tabs-nav-wrap,
        .ant-tabs-nav-scroll {
            overflow: visible !important;
        }

        .ant-tabs-tab-prev {
            background: #fff;
            box-shadow: 2px 0 2px 0 rgba(0, 0, 0, 0.08);
        }

        .ant-tabs-tab-next {
            background: #fff;
            box-shadow: -2px 0 2px 0 rgba(0, 0, 0, 0.08);
            right: 0 !important;
        }

        > .ant-tabs-nav-container {
            overflow: visible !important;
            background: #fff !important;
            height: 48px !important;
            border-bottom: 1px solid #ebebeb;
        }

        .ant-tabs-nav {
            margin-top: 7px;
            margin-left: 3px;

            > div {
                padding: 0 24px;
            }
        }

        .ant-tabs-nav-container {
            margin-left: 94px;
        }

        .ant-tabs-tab {
            border-bottom: none !important;
            margin-right: 15px !important;
            background: #fff !important;
            transition: none !important;
            margin: 0 4px !important;
            color: rgba(0, 0, 0, 0.65);

            .ant-tabs-close-x {
                margin-left: 5px !important;
                margin-right: 3px !important;
                display: none;
                transition: none !important;
                position: relative;
                overflow: visible !important;

                &:after {
                    display: none;
                    content: '';
                    position: absolute;
                    left: -1px;
                    right: 0;
                    top: -3px;
                    bottom: 0;
                    background: #e0e0e0;
                    border-radius: 50%;
                    color: #73000000;
                    z-index: 0;
                    width: 18px;
                    height: 18px;
                }

                svg {
                    position: relative;
                    z-index: 1;
                    color: rgba(0, 0, 0, 0.45) !important;
                }
            }

            &:hover {
                font-weight: 600;
                color: rgba(0, 0, 0, 0.65);

                .ant-tabs-close-x {
                    display: inline-block;

                    &:hover {
                        &::after {
                            display: block;
                        }
                    }
                }
            }

            > div {
                position: relative;
                //background : #F7F7F7!important;
                border-radius: 0 !important;
                border-left: none !important;
                border-right: none !important;
                padding-left: 8px;
                padding-right: 8px;

                &:before {
                    border-right: 8px solid #fff;
                    content: '';
                    border-top: 39px solid transparent !important;
                    position: absolute;
                    top: 0;
                    line-height: 40px;
                    left: -12px;
                    z-index: 3;
                    width: 0;
                }

                &:after {
                    content: '';
                    position: absolute;
                    border-left: 8px solid #fff;
                    border-top: 39px solid transparent;
                    top: 0;
                    line-height: 40px;
                    z-index: 2;
                    right: -11px;
                }
            }

            &.ant-tabs-tab-active {
                background: #f0f2f5 !important;
                z-index: 4;
                height: 41px !important;
                color: #262626 !important;
                font-weight: 600;

                > div {
                    padding-left: 2px;
                    padding-right: 2px;

                    &:before {
                        border-color: #f0f2f5;
                        border-top-width: 40px !important;
                    }

                    &:after {
                        border-left-color: #f0f2f5;
                        border-top-width: 40px !important;
                    }
                }

                .ant-tabs-close-x {
                    display: inline-block;
                    margin-left: 10px !important;
                }
            }

            &:not(.ant-tabs-tab-active) {
                > div {
                    padding-right: 8px;

                    &:hover {
                        padding-right: 0;
                    }
                }

                // 第一个tab不能关闭的样式
                &:first-of-type:hover {
                    > div {
                        padding-right: 8px !important;
                    }
                }
            }

            position: relative;

            &:before {
                border-right: 8px solid #ebebeb;
                left: -9px;
                content: '';
                border-top: 39px solid transparent !important;
                position: absolute;
                top: 0;
                z-index: 2;
                width: 0;
            }

            &:after {
                content: '';
                border-top: 39px solid transparent;
                position: absolute;
                top: 0;
                border-left: 8px solid #ebebeb;
                right: -8px;
                z-index: 0;
            }

            .anticon {
                margin-right: 4px !important;
            }
        }
    }
}

button.ant-btn {
    line-height: 22px;
}

.ant-btn-background-ghost.ant-btn-primary {
    &:hover {
        background-color: @primary-color !important;
        color: #fff !important;
    }
}

.complex-search {
    margin-top: -8px !important;

    .ant-form-item {
        margin-top: 8px;
    }
}

.ant-pagination-item {
    padding: 0 6px;
}

.ant-table .ant-table-thead > tr > th.ant-table-column-has-actions.ant-table-column-has-filters {
    //padding-right: 16px !important; // 不知道为什么要设置成16, 但有过滤的图标下确实会出错
}

.ant-table-thead > tr > th .anticon-filter,
.ant-table-thead > tr > th .ant-table-filter-icon {
    position: static !important;
}

.ant-table-thead > tr > th .anticon-filter > svg,
.ant-table-thead > tr > th .ant-table-filter-icon > svg {
    left: auto !important;
}

.ant-table-thead {
    th {
        white-space: nowrap;
    }
}

.ant-table .ant-table-tbody > tr td .autoVisibleIcon {
    color: rgba(0, 0, 0, 0.4);
    visibility: hidden;
}
.ant-table .ant-table-tbody > tr td .autoVisibleIcon:hover {
    color: @primary-color;
    cursor: pointer;
}
.ant-table .ant-table-tbody > tr:hover td .autoVisibleIcon {
    visibility: visible;
}

.ant-tabs .ant-tabs-top-content > .ant-tabs-tabpane,
.ant-tabs .ant-tabs-bottom-content > .ant-tabs-tabpane {
    -webkit-backface-visibility: hidden;
}

.ant-calendar-range .ant-tag-blue {
    color: #ffa22d !important;
    border-color: #ffa22d !important;
    background: #fff !important;
    cursor: pointer;
}

.ant-table-filter-dropdown-btns {
    .ant-table-filter-dropdown-link.confirm {
        float: right;
    }

    .ant-table-filter-dropdown-link.clear {
        float: left;
    }
}

.ant-popover-buttons > button {
    min-width: 52px;
}

.has-error .validate-pass {
    .ant-select-selection,
    .ant-select-selection:hover,
    .ant-input,
    .ant-input:hover,
    .ant-input:focus,
    .ant-input:not([disabled]):hover,
    .ant-calendar-picker-open .ant-calendar-picker-input,
    .ant-input-affix-wrapper .ant-input,
    .ant-input-affix-wrapper .ant-input:hover,
    .ant-input-affix-wrapper .ant-input:focus,
    .ant-input-affix-wrapper:hover .ant-input:not(.ant-input-disabled),
    .ant-select-selection,
    .ant-select-selection:hover,
    .ant-select-open .ant-select-selection,
    .ant-select-focused .ant-select-selection,
    .ant-select.ant-select-auto-complete .ant-input:focus,
    .ant-input-group-addon .ant-select-selection,
    .ant-input-number,
    .ant-time-picker-input,
    .ant-input-number-focused,
    .ant-time-picker-input-focused,
    .ant-input-number:focus,
    .ant-time-picker-input:focus,
    .ant-input-number:not([disabled]):hover,
    .ant-time-picker-input:not([disabled]):hover,
    .ant-mention-wrapper .ant-mention-editor,
    .ant-mention-wrapper .ant-mention-editor:not([disabled]):hover,
    .ant-mention-wrapper.ant-mention-active:not([disabled]) .ant-mention-editor,
    .ant-mention-wrapper .ant-mention-editor:not([disabled]):focus,
    .ant-cascader-picker:focus .ant-cascader-input,
    .ant-cascader-picker:hover .ant-cascader-input,
    .ant-transfer-list {
        border: 1px solid #d9d9d9 !important;
        box-shadow: none !important;
    }

    .ant-form-explain,
    .ant-form-split,
    .ant-input-prefix,
    .ant-input-group-addon,
    .has-feedback,
    .has-feedback .ant-form-item-children-icon,
    .ant-calendar-picker-icon::after,
    .ant-time-picker-icon::after,
    .ant-picker-icon::after,
    .ant-select-arrow,
    .ant-cascader-picker-arrow {
        color: #d9d9d9 !important;
    }
}

.noErrorStyle {
    .ant-form-explain {
        visibility: hidden;
    }
}
.am-picker-popup-header {
    .am-picker-popup-item {
        height: 56px;
        font-size: 16px;
    }
}
.am-modal-title {
    line-height: 26px;
}

.slide-left-solid-enter,
.slide-left-solid-appear {
    opacity: 0;
    animation-duration: 0.2s;
    animation-fill-mode: both;
    animation-play-state: paused;
    animation-timing-function: cubic-bezier(0.23, 1, 0.32, 1);
}
.slide-left-solid-leave {
    animation-duration: 0.2s;
    animation-fill-mode: both;
    animation-play-state: paused;
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
}
.slide-left-solid-enter.slide-left-solid-enter-active,
.slide-left-solid-appear.slide-left-solid-appear-active {
    animation-name: slideLeftSolidIn;
    animation-play-state: running;
}
.slide-left-solid-leave.slide-left-solid-leave-active {
    animation-name: slideLeftSolidOut;
    animation-play-state: running;
    pointer-events: none;
}

@keyframes slideLeftSolidIn {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slideLeftSolidOut {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}
